
<template>
 <div class="tou">
   
   <div class="middle">
      <template></template>
      <van-steps :active="active">
        <van-step>输入手机号</van-step>
        <van-step>输入邮箱</van-step>
        <van-step>输入昵称</van-step>
        <van-step>设置密码</van-step>
      </van-steps>
      <form action="">
        <p>
        <input  class="phone" type="text" placeholder="请输入你的手机号" v-model="phoneNumber" @blur="Phonefn">
        </p>
        <p>
          <input type="text" placeholder="请输入邮箱 " v-model="email" @blur="Emailfn">
        </p>
        <p>
          <input type="text" placeholder="请输入昵称 4-8个中文或英文" v-model="nickname" @blur="Ncnfn">
        </p>
        <p>
          <input type="password" placeholder="请设置你的密码 6-20个字母、数字、下划线" v-model="password" @blur="Pwdfn">
        </p>
        <p>
          <input type="submit" value="注册" style="border-radius:5px;" @click="handleRegistry" ref="submit">
        </p>
      </form>
      <div class="bottom">
        <input type="checkbox" @click="agree($event)">
        <span>
          我已阅读并同意
          <a href="https://i.meituan.com/awp/hfe/block/3d3a4d2765b0/30632/index.html">《FK网用户协议》</a>
        </span>
      </div>
   </div>
 </div>
</template>

<script>
import { Registry } from '../../api/user'
import { Dialog } from 'vant';

export default {
  data () {
    return {
      active: 0,
      phoneNumber: '',
      email: '',
      nickname:'',
      password: '',
      Verification: ''
    }
  },
  methods: {
    handleRegistry () {
      Registry({
        phoneNumber: this.phoneNumber,
         email: this.email,
         nickname:this.nickname,
        password: this.password
      }).then(res => {
        let result = res.data.msg
        alert(result)
        console.log(result)
        this.$router.push('/login')
      })
      this.active = 0
    },
    // 注册信息验证
    Phonefn () { // 手机号验证
      var Phonereg = /^[1][3,4,5,7,8][0-9]{9}$/
      if (this.phoneNumber && Phonereg.test(this.phoneNumber)) {
        this.active++
        this.Verification = true
      } else {
        // alert('请输入正确手机号')
        Dialog({ message: '请输入正确手机号' });
        this.phoneNumber=""
        this.Verification = false
      }
    },
    Emailfn () { // 邮箱验证
     var EmailReg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (this.email && EmailReg.test(this.email)) {
        this.active++
        this.Verification = true
      } else {
        // alert('请输入正确格式邮箱')
        Dialog({ message: '请输入正确格式邮箱'});
        this.email=""
        this.Verification = false
      }
    },
    Ncnfn () { // 昵称验证
     var NcnReg = /^[\u0391-\uFFE5A-Za-z]{4,8}$/
      if (this. nickname&& NcnReg.test(this.nickname)) {
        this.active++
        this.Verification = true
      } else {
        // alert('只能输入4-8个中文或英文')
        Dialog({ message: '只能输入4-8个中文或英文'});
        this.nickname=""
        this.Verification = false
      }
    },
    Pwdfn () { // 密码验证
      var pwdReg = /^(\w){6,20}$/
      if (this.password && pwdReg.test(this.password)) {
        this.active++
        this.Verification = true
      } else {
        // alert('只能输入6-20个字母、数字、下划线 ')
        Dialog({ message: '只能输入6-20个字母、数字、下划线'});
        this.password=""
        this.Verification = false
      }
    },
    agree (e) { // 用户协议
      let checked = e.target.checked
      if (checked && this.Verification) {
        this.$refs['submit'].style.background = '#df2d2d'
        this.$refs['submit'].style.color = '#fff'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  body,html{
    height:100%;
    background: #f8f8f8;
  }
    .header{
      height:50px;
      width:100%;
      display: flex;
      align-items: center;
      text-align: center;
      font-size: 20px;
      background: #df2d2d;
      color: #fff;
    }
    i{
      display: block;
      width:50px;
      height:50px;
      line-height: 50px;
    }
    h1{
      flex: 1;
    }
  
  .middle{
    p{
      padding:10px;
      input{
        width:95%;
        height:30px;
     border: 0;
        padding-left: 10px;
   
    border-bottom: 1px solid #ccc;
  
      }
    }
  }
  .bottom{
    margin:15px;
    color:#333;
    a{
      color:#df2d2d;
    }
  }
 .tou{
   margin-top: 50px;
 }
</style>
